<template>
  <div class="approve-detail-container">
    <div class="top">
      <span class="status-span" :class="['status-' + projectInfo.status]">{{
        statusName[projectInfo.status - 1]
      }}</span>
      <div class="info-wrap">
        <div class="label-span">
          <span class="label">经办人：</span>
          <span class="span">{{ projectInfo.jbr }}</span>
        </div>
        <div class="label-span">
          <span class="label">新增时间：</span>
          <span class="span">{{ projectInfo.createTime }}</span>
        </div>
      </div>
    </div>
    <div class="g-title">项目基本信息</div>
    <div class="table-wrap">
      <div>
        <div
          class="list-info"
          :key="$index"
          v-for="(item, $index) in projectInfo.columnList"
        >
          <div class="content" v-if="item.name !== 'zbdRecommenderInfoDomainList'"> 
            <span class="leftspan">{{ item.showname }}</span>
            <span class="rightspan">{{ item.value }}</span> 
          </div>
          <div v-if="item.name === 'zbdRecommenderInfoDomainList' && item.value.length">
            <div class="content" style="border-bottom: 0">
              <div class="leftspan">{{ item.showname }}</div>
            </div> 
            <div class="item-list" v-for="(it, $index) in item.value" :key="'it' + $index">
              <div class="text" :key="$index">
                <div class="it"><span class="td">推荐单位:</span><span class="bd">{{ it.recommenderUnit }}</span></div>
                <div class="it"><span class="td">推荐人:</span><span class="bd">{{ it.recommender }}</span></div>
                <div class="it"><span class="td">推荐原因:</span><span class="bd">{{ it.recommendationReason }}</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="sysKey === 'jianggan'">
      <div class="g-title">附件</div>
      <div class="files-wrap">
        <div v-for="file in filesList" :key="file.id">
          <div class="file-link-card">
            <div class="file-img"></div>
            <div class="file-link" @click="getDownload(file)">
              {{ file.name }}
            </div>
          </div>

          <!-- <file-link :file-data="file" @download="downloadFile"></file-link> -->
        </div>
      </div>
      <div class="g-title">会议纪要</div>
      <div class="files-wrap">
        <div v-for="it in meetingList" :key="it.id">
          <div class="file-link-card">
            <div class="file-img"></div>
            <div class="file-link" @click="getDownload(it)">
              {{ it.name }}
            </div>
          </div>
          <!-- <file-link :file-data="it"></file-link> -->
        </div>
      </div>
    </div>
    <div v-else>
      <div v-for="(files, $index) in fileListMul" :key="$index">
        <div v-if="files.list.length > 0" :title="files.name + '附件'"></div>
        <div class="files-wrap">
          <div v-for="file in files.list" :key="file.id">
            <div class="file-img"></div>
            <div class="file-link">
              {{ file.name }}
            </div>
            <file-link :file-data="file" @download="downloadFile"></file-link>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom fixed-bottom">
     
      <!-- <button
        v-if="projectInfo.status !== 3 && projectInfo.isCur"
        type="primary"
        class="btn approve-btn"
       
      >
        审批
      </button> -->
      <van-button class="v-btn" type="default"  @click="goApproveLog">审批记录</van-button>
      <van-button  v-if="projectInfo.status !== 3 && projectInfo.isCur" class="v-btn" type="default"  @click="goApprove">审批</van-button>
    </div>
    <!-- <uni-popup ref="popup" type="center">
				<uni-popup-dialog 
					mode="input" 
					title="输入内容" 
					value="" 
					placeholder="请输入退回说明" 
					:before-close="true"  
					@close="backClose" 
					@confirm="backConfirm"></uni-popup-dialog>
		</uni-popup> -->
  </div>
</template>
<script>
// import HeaderTop from '../components/HeaderTop'
import { getFlowDetail, getFileList } from "../api"
import { fileUpBaseUrl } from '../api/config'
// import download from "downloadjs"
// import FileSaver from 'file-saver'
// import { Toast } from 'vant';
// import dd from 'gdt-jsapi';
// dd.goBack().then(res => {
//     console.log(res)

//     console.log(111111)
//     document.querySelector('html').style.fontSize = localStorage.getItem('fontSize')
// }).catch(err => {})
var hiddenProperty = 'hidden' in document ? 'hidden' :    

    'webkitHidden' in document ? 'webkitHidden' :    

    'mozHidden' in document ? 'mozHidden' :    

    null;

var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');

var onVisibilityChange = function(){

    if (document[hiddenProperty]) {    
        console.log('页面非激活');
        // document.querySelector('html').style.fontSize = '40px' || localStorage.getItem('fontSize')
        // document.getElementsByTagName('html')[0].style.fontSize = localStorage.getItem('fontSize')
        
    } else {
        console.log('页面激活')
        // document.querySelector('html').style.fontSize = '40px' || localStorage.getItem('fontSize')
        // document.getElementsByTagName('html')[0].style.fontSize = localStorage.getItem('fontSize')
        // console.log('22', document.querySelector('html').style.fontSize)
    }
    document.title = '立项审批管理'
}

document.addEventListener(visibilityChangeEvent, onVisibilityChange);

export default {
  data() {
    return {
      statusName: ['待提交', '审批中', '审批未通过', '审批通过'],
      params: {
        id: '',
        tablename: ''
      },
      projectInfo: {
        id: '',
        'tableName': '',
        'processId': '',
        'jbr': '',
        'createTime': '',
        'isCur': '',
        'status': '',
        columnname: '',
        columnList: []
      },
      filesList: [],
      meetingList: [],
      fileListMul: [],
      filesInfo: [],
      sysName: '',
      sysKey: 'jianggan'
    }
  },
  created() {
    // document.querySelector('html').style.fontSize = localStorage.getItem('fontSize')
  },
  mounted() {
    this.params.id = this.$route.query.id
    this.params.tablename = this.$route.query.tablename
    this.getDetail()
  },
  destroyed() {
    // console.log(333)
    // document.querySelector('html').style.fontSize = localStorage.getItem('fontSize')
  },
  methods: {
    getDetail() {
      // const _this = this
      // const data = {"msg":"","code":1,"dataList":[{"isEmergency":1,"processId":"83c3495c98234b87818fe7c816ce12d7","createTime":"2023-07-03 11:24:41","columnList":[{"showname":"立项审批编号","name":"no","sort":1,"type":"text","value":"JLJS2023YQFW124"},{"showname":"招标项目名称","name":"name","sort":2,"type":"text","value":"上城微信小程序应急项目二测试"},{"showname":"招标人","name":"zbrName","sort":3,"type":"text","value":"浙江今隆建设有限公司(测试)"},{"showname":"招标项目类型","name":"type","sort":4,"type":"text","value":"服务类"},{"showname":"是否纳入年度预算交易计划","name":"isYear","sort":5,"type":"text","value":"否"},{"showname":"是否应急项目","name":"isEmergency","sort":6,"type":"text","value":"是"},{"showname":"资金来源","name":"source","sort":7,"type":"text","value":"区财政（10%）、街道财政（50%）、区级国有投资（40%）"},{"showname":"预算价","name":"budgetPrice","sort":8,"type":"text","value":1234.56},{"showname":"拟交易时间","name":"tradeTime","sort":9,"type":"text","value":"2023-07-03"},{"showname":"拟交易方式","name":"tradeType","sort":10,"type":"text","value":"邀请竞标"},{"showname":"邀请和协议的推荐单位","name":"zbdRecommenderInfoDomainList","sort":11,"type":"text","value":[{"zbdId":"8efd4f0b016b4fce81487c8c3dd46e0e","createTime":1689325666000,"isDelete":0,"cratorId":"33f748add15148a4b6c11ae901613be0","recommenderUnit":"测试推荐单位2","id":"66418670bf6249eeb173157bd4d8e521","recommendationReason":"测试推荐理由2","recommender":"测试推荐人2","createName":"经办人2"},{"zbdId":"8efd4f0b016b4fce81487c8c3dd46e0e","createTime":1688354928000,"isDelete":0,"cratorId":"33f748add15148a4b6c11ae901613be0","recommenderUnit":"测试推荐单位1","id":"66418670bf6249eeb173157bd4d8e972","recommendationReason":"测试推荐理由1","recommender":"测试推荐人1","createName":"经办人2"}]},{"showname":"项目申报材料","name":"sbcl","sort":14,"type":"text","value":"其他（测试）"},{"showname":"项目申请理由","name":"applyReason","sort":15,"type":"textarea","value":"测试"},{"showname":"附件","name":"file","sort":16,"type":"file","columnname":""}],"isCur":false,"id":"8efd4f0b016b4fce81487c8c3dd46e0e","jbr":"经办人2","tablename":"zbd_lxsp_info","status":2,"columnListRec":[{"zbdId":"8efd4f0b016b4fce81487c8c3dd46e0e","createTime":1689325666000,"isDelete":0,"cratorId":"33f748add15148a4b6c11ae901613be0","recommenderUnit":"测试推荐单位2","id":"66418670bf6249eeb173157bd4d8e521","recommendationReason":"测试推荐理由2","recommender":"测试推荐人2","createName":"经办人2"},{"zbdId":"8efd4f0b016b4fce81487c8c3dd46e0e","createTime":1688354928000,"isDelete":0,"cratorId":"33f748add15148a4b6c11ae901613be0","recommenderUnit":"测试推荐单位1","id":"66418670bf6249eeb173157bd4d8e972","recommendationReason":"测试推荐理由1","recommender":"测试推荐人1","createName":"经办人2"}]}],"isSuccess":"true"}
      // _this.projectInfo.columnList = data.dataList[0].columnList
      const token = localStorage.getItem('zzdToken')
      getFlowDetail({
        id: this.$route.query.id,
        tablename: this.$route.query.tablename
      }, token).then(res => {
        // console.log("数据", data)
        if (res.data.code === 1) {
          this.projectInfo = res.data.dataList[0]
          const columnList = res.data.dataList[0].columnList.slice()
          this.projectInfo.columnList = columnList.filter(item => item.type !== 'file')
          this.projectInfo.columnFileList = columnList.filter(item => item.type === 'file')
          this.getFiles()
          this.getMeetings(1)
        }
      })
    },
    getFiles(name = '') {
      const fileParams = {
        columnname: name || '',
        ...this.params
      }
      const token = localStorage.getItem('zzdToken')
      getFileList(fileParams, token).then(res => {
        if (res.data.code === 1) {
          this.filesList = res.data.dataList.slice()
        }
      })
    },
    getMeetings() {
      const fileParams = {
        columnname: 1,
        ...this.params
      }
      const token = localStorage.getItem('zzdToken')
      getFileList(fileParams, token).then(res => {
        if (res.data.code === 1) {
          this.meetingList = res.data.dataList.slice()
        }
      })
    },
    goApproveLog() {
      this.$router.push({ path: '/log', query: {id: this.params.id, tablename: this.params.tablename}})
    },
    goApprove() {
      this.$router.push({ path : '/approve', query: {id: this.params.id, tablename: this.params.tablename}} )
    },
    backClose(done) {
      done()
    },
    getDownload(it) {
      const token = localStorage.getItem('zzdToken')


      // const { filename, fileurl, filetype } = this.props.location.state
      // let ua = navigator.userAgent.toLowerCase()
    
      var src = fileUpBaseUrl + 'id=' + it.id + '&zzdToken=' + token
      console.log(src)
      location.href = src
      // if (!ua.includes("mac")) {
      //     //iOS 将文件url转换为文件流 在下载
        
      //   // var form = document.createElement('form');
      //   // form.action = src;
      //   // document.getElementsByTagName('body')[0].appendChild(form);
      //   // form.submit();
      //   // getFileDown({id: it.id} ,token).then(res=> {
      //   //   console.log('res:', res)
      //   // })
      //   var src = fileUpBaseUrl + 'id=' + it.id + '&zzdToken=' + token
      //   console.log(src)
      //   // location.href = src
      //   // window.open(src, '_blank')


      //   // const link = document.createElement('a')
      //   // link.href = src
      //   // link.target = '_blank'
      //   // link.download = fileName
      //   // link.style.display = 'none'
      //   // document.body.append(link)
      //   // link.click()
      //   // FileSaver.saveAs(fileUpBaseUrl + 'id=' + it.id + '&zzdToken=' + token, it.name);
      // } else {
      //     //android 直接用插件的方法下载即可 
      //   // download(fileUpBaseUrl + 'id=' + it.id + '&zzdToken=' + token )
      //   // FileSaver.saveAs(fileUpBaseUrl + 'id=' + it.id + '&zzdToken=' + token, it.name);
      // }
    },
    async downloadFun(blobFile, fileName) {
      // eslint-disable-next-line no-debugger
      debugger
        let blob = new Blob([blobFile], {
          type: "application/pdf;charset=UTF-8",
        })
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName)
        } else {
          var link = document.createElement("a")
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          window.URL.revokeObjectURL(link.href) //释放内存
        }
  }
    // backConfirm(done, value) {
    //   if (!value) {
    //     Toast({
    //       icon: 'none',
    //       title: '请输入退回说明！'
    //     })
    //     return
    //   }
    //   const params = {
    //     ...this.params,
    //     userId: this.currentNextUser,
    //     remark: value,
    //     result: 2
    //   }
    //   // const result = await service.getFlowSub(params)
    //   done()
    //   this.getProjectDetail()
    // }
  },
  components: {

  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../common/stylus/mixin.styl';
</style>

<style lang="scss" scoped>
.approve-detail-container {
  width: 100%;
  background-color: rgba(247, 248, 252, 1);
  padding-bottom: 25px;
  .top {
    background-color: #fff;
    padding: 0 15px;
    .status-span {
      display: block;
      text-align: center;
      padding: 10px;
      border-bottom: 1px solid rgba(224, 224, 224, 1);
    }
    .info-wrap {
      margin-bottom: 10px;
      .label-span {
        display: flex;
        padding: 5px 0;
        justify-content: space-between;
        .label {
          font-weight: 400;
          color: rgba(158, 166, 177, 1);
        }
      }
    }
  }

  .g-title {
    border-left: 5px solid #2982de;
    padding-left: 12px;
    margin-bottom: 10px;
  }
  .table-wrap {
    margin-bottom: 10px;
    padding: 0 15px;
    background-color: #fff;
    .uni-list-item__content {
      flex: 1 0 30% !important;
      color: rgba(158, 166, 177, 1);
    }
    .right-span {
      color: #333;
    }
  }
  .files-wrap {
    padding: 0 15px;
    margin-bottom: 10px;
    background-color: #fff;
    // display: flex;
    .file-link-card {
      display: flex;
      height: 40px;
      padding: 15px 14px;
      background: #ffffff;
      border-radius: 4px;
      margin-top: 16px;
      margin-bottom: 3px;
      .file-img {
        background-image: url("../assets/tabbar/file_icon.jpg");
        background-repeat: no-repeat;
        background-size: contain;
        width: 40px;
        height: 40px;
      }
      .file-link {
        height: 40px;
        font-size: 14px;
        color: #2b518a;
        text-align: left;
        margin-left: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 80%;
      }
    }
  }
  .bottom {
    width: 100%;
    display: flex;
    &.fixed-bottom {
      position: fixed;
      bottom: 0;
    }
    .v-btn {
      flex: 1;
    }
    .log-btn {
      border-radius: 0;
      background-color: #fff;
      color: #333;
    }
  }
}
.uni-list-item {
  .uni-list-item__extra-span {
    text-align: right;
  }
}
.list-info {
  // display: flex;
  // align-items: center;
  // padding: 12px 0;
  // border-bottom: 1px solid #e3e3e5;
  .content {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e3e3e5;
    .leftspan {
      flex: 1;
      font-size: 14px;
      padding-left: 15px;
    }
    .rightspan {
      width: 110px;
      color: #999;
      font-size: 12px;
    }
  }
  
}
.item-list {
    display: flex;
    flex: 1;
    overflow: hidden;
    flex-direction: column;
    .text {
      border-bottom: 1px solid #e3e3e5;
    }
    .it {
      font-size: 12px;
      color: #333333;
      display: flex;
      margin: 20px 0;
      .td {
        padding: 0 20px;
        color: #888;
      }
      .bd {
        color: #999999;
        overflow: hidden;
        flex: 1;
        text-align: right;
      }
    }
  }
.status-1 {
  color: rgba(158, 166, 177, 1);
}
.status-2 {
  color: rgba(247, 192, 24, 1);
}
.status-3 {
  color: rgba(190, 13, 34, 1);
}
.status-4 {
  color: rgba(19, 112, 14, 1);
}
</style>
